<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="decorator" uri="http://claudiushauptmann.com/jsp-decorator/"%>
<%@ page import="vn.fpt.fsoft.entity.User" %>

<decorator:decorate filename="MasterPage.jsp">
	<decorator:content placeholder="title">New Government Office Region</decorator:content>
	<decorator:content placeholder="head">
		<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
		<link href="css/style-1.css" rel="stylesheet" type="text/css" />
		<script
			src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
		<script
			src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
		<script type="text/javascript"
			src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="http://bootboxjs.com/bootbox.js"></script>
		<link rel="stylesheet" href="css/style-homepage.css" type="text/css">

		<script type="text/javascript">
			function logout() {
				$.ajax({
					url : "UserController?action=logout",
					type : "POST",
					success : function(data) {
					},
					error : function(data) {
					}
				});
				return true;
			}

			$(document).ready(function() {
				$("#tabs").tabs();
				$(window).load(function() {
					$.ajax({
						url : "ListGovOfficeRegionController?action=getdata",
						type : "GET",
						success : function(data) {
							$("select").append(data);
						},
						error : function(data) {

						}
					});
				});
			});

			function isValidate() {
				var valid = true;
				var error = "";
				$("#name").css("border-color", "");
				$("#county").css("border-color", "");
				$("#description").css("border-color", "");
				if ($("#name").val() == "") {
					error += "Please input the Government Office Region<br/>";
					document.getElementById("name").style.borderColor = "red";
					valid = false;
				}
				if ($("#county option:selected").val() == "0") {
					error += "Please choose county <br />";
					document.getElementById("county").style.borderColor = "red";
					valid = false;
				}
				if ($("#description").val().length > 300) {
					error += "Exceed the allowed character";
					document.getElementById("description").style.borderColor = "red";
					valid = false;
				}
				$("#invalid").html(error);
				return valid;
			}

			function Click_Save() {
				if (isValidate()) {
					bootbox.confirm("Do you  want to save it?",
						function(result) {
							if (result == true) {
								var countyID = $("#county option:selected").val();
								var govOfficeRegionName = $("#name").val();
								var description = $("#description").val();
								$("#invalid").html("");
								$.ajax({
									url : "ListGovOfficeRegionController?action=add&countyid="+ countyID
										+ "&govname="+ govOfficeRegionName
										+ "&description="+ description,
									type : "GET",
									success : function(data) {
										$("#name").val("");
										$("#name").css("border-color","");
										$("#description").val("");
										$("#county").val("0");
										$("#invalid").html(data);
										$("#invalid").css("color","green");
									},
									error : function(data) {
										alert("fail");
									}
								});
							} else {
								$("#invalid").html("");
								$("#name").val("");
								$("#description").val("");
								$("#county").val("0");
								$("#name").focus();
							}
					});
				}
			}

			function Click_Cancel() {
				window.location.replace("ListGovOfficeRegion.jsp");
			}
		</script>

	</decorator:content>
	<decorator:content placeholder="body">
	<%
		User user = (User) request.getSession().getAttribute("user");
		if(user == null) {
		    response.sendRedirect("login.jsp");
		}
	%>
		<p style="color: #0C3; font-size: 24px; font-weight: bold;">Government Office Region Create</p>
		<div id="tabs" style="width: 795px;">
			<ul>
				<li><a href="#detail1">Create</a></li>
				<li style="float: right">
					<input type="button" value="Save"onclick="Click_Save();" /> &nbsp;&nbsp;
					<input type="button"value="Back" onclick="Click_Cancel();" />
				</li>
			</ul>
			<div id="detail1" style="background-color: #EFEFEF;">
				<table style="width:703px">
					<tr>
						<td>Government Office Region name</td>
						<td><input id="name" type="text" size="32" /></td>
					</tr>
					<tr>
						<td height="100">Description</td>
						<td><textarea id="description" rows="4" cols="32"></textarea></td>
					</tr>
					<tr>
						<td>County</td>
						<td><select id="county" style="width: 63%;">
						</select></td>
					</tr>
				</table>
				<br /> <br /> <br />
				<p id="invalid" style="color: #F00; font-size: 14px"></p>
			</div>
		</div>
	</decorator:content>
</decorator:decorate>